<template>
  <div>
    <!-- 搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="书籍名称">
        <el-input v-model="formInline.bookname" placeholder="请输入书籍名称" />
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="formInline.author" placeholder="请输入作者" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="onSubmits">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加 -->
    <el-button type="primary" plain @click="addlist">新增</el-button>
    <!-- 列表 -->
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column label="编号">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="书籍名称">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.bookname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="作者">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.author }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="库存">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.num }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pagesize"
        :page-sizes="[2, 4, 6, 8]"
        :small="small"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="400px">
      <el-form :model="form" label-width="70px">
        <el-form-item label="书籍名称">
          <el-input v-model="form.bookname" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.type" />
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="form.num" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="addbook"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { Timer } from "@element-plus/icons-vue";
import {
  getdata,
  getdatapage,
  getsearch,
  add,
  editlist,
  deletelist,
} from "../../api/api";
import { ref, reactive, onMounted } from "vue";

// 定义数据类型
interface User {
  id?: number;
  bookname: string;
  author: string;
  type: string;
  num: number;
}

// 判断弹框是否打开
const dialogFormVisible = ref(false);

// 默认宽度
const formLabelWidth = "140px";

// 缩小
const small = ref(false);

// 背景色
const background = ref(true);

// 总数
const total = ref(0);

// 第几页
const page = ref(1);

// 每页多少条
const pagesize = ref(2);

// 弹框名称
const title = ref("");

// 待修改的id
const editid = ref(0);

// 待删除的id
const delid = ref(0);

// 数据
const tableData = reactive({
  list: [],
});

// 搜索的表单
const formInline = reactive({
  bookname: "",
  author: "",
});

// 新增和修改的表单
let form = reactive({
  bookname: "",
  author: "",
  type: "",
  num: 0,
});

onMounted(() => {
  render();
});

// 渲染
const render = () => {
  let obj: object = {
    page: page.value,
    pagesize: pagesize.value,
  };
  // 获取总条数
  getdata().then((res) => {
    total.value = res.data.data.length;
  });
  // 分页渲染
  getdatapage(obj).then((res) => {
    tableData.list = res.data.data;
  });
};

// 点击搜索执行的函数
const onSubmit = () => {
  getsearch(formInline).then((res) => {
    tableData.list = res.data.data;
    total.value = res.data.data.length;
  });
};

// 点击重置执行的函数
const onSubmits = () => {
  render();
};

// 点击新增执行的函数
const addlist = () => {
  title.value = "新增书籍";
  dialogFormVisible.value = true;
};

// 点击修改执行的函数
const handleEdit = (index: number, row: User) => {
  title.value = "修改书籍";
  editid.value = row.id;
  dialogFormVisible.value = true;
  form = row;
};

// 点击确定执行的函数
const addbook = () => {
  if (title.value == "新增书籍") {
    add(form).then((res) => {
      if (res.data.code == 1) {
        dialogFormVisible.value = false;
        render();
      }
    });
  } else {
    let obj = {
      editid: editid.value,
      bookname: form.bookname,
      author: form.author,
      type: form.type,
      num: form.num,
    };
    editlist(obj).then((res) => {
      if (res.data.code == 1) {
        dialogFormVisible.value = false;
        render();
      }
    });
  }
};

// 点击取消执行的函数
const close = () => {
  dialogFormVisible.value = false;
  render();
};

// 点击删除执行的函数
const handleDelete = (index: number, row: User) => {
  delid.value = row.id;
  deletelist(delid.value).then((res) => {
    if (res.data.code == 1) {
      alert("删除成功");
      render();
    }
  });
};

// 当前在第几页
const handleCurrentChange = (val: number) => {
  page.value = val;
  render();
};

// 每页多少条
const handleSizeChange = (val: number) => {
  pagesize.value = val;
  render();
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.demo-pagination-block {
  float: right;
  margin-top: 20px;
}
</style>